<template>
  <div class="index">
    <Header></Header>
    <div class="main">
      <p class="current-nav">
        当前位置 :
        <router-link to="index">首页</router-link>
        <i> > </i>
        <router-link to="editplan">应急预案编制</router-link>
        <i> > </i>预案清单上传
      </p>
      <div class="infor record" style="margin-bottom:0;">
        <ul class="clearfix steps" style=" padding-top:20px;">
          <li  @click="goToPage(0)" class="steps-active">
            <span>1</span>
            <p>应急预案上传</p>
          </li>
          <li  @click="goToPage(1)" class="steps-active">
            <span>2</span>
            <p>预案清单上传</p>
          </li>
          <!--          <li @click="goToPage(1)">
                      <span>2</span>
                      <p>预案清单上传</p>
                    </li>-->

        </ul>
      </div>
      <div class="infor planmanage2" style="margin-top: 0" >
        <dl>
          <dt class="dl-btn"><i class="el-icon-info"></i>温馨提示</dt>
          <dd>
            （1）第一次在线编辑文档需安装pageoffice插件，后面无需安装；
          </dd>
          <dd>
            （2）如果点击编辑打开失败，请安装
            <a href="http://www.wps.cn/" target="_blank">WPS</a>
            ，即可正常打开；
          </dd>
          <dd>
            （3）请先点击“清单模板下载”下载并填写清单模板，再上传预案清单。
          </dd>
        </dl>
        <div class="form-container">
          <div class="manageBtn_div clearfix">
            <a download href="../../../static/应急预案清单.xlsx">
              <el-button>
                <i class="el-icon-download">清单模板下载</i>
              </el-button>
            </a>
            <el-upload
              action=""
              :http-request="uploadPlan"
              class="fr"
            >
            <el-button
            ><i class="el-icon-upload2"></i
            >上传
            </el-button>
            </el-upload>
          </div>
          <el-table
            ref="multipleTable"
            :data="planList1"
            tooltip-effect="dark"
            v-loading.lock="loadings"
            element-loading-spinner="el-icon-loading"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="originalFileName"
              label="文本标签"
              :show-overflow-tooltip="true"
              align="left"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              align="center"
              width="480"
            >
              <template slot-scope="scope">
                <div class="div-edit">
                  <el-button
                    @click="lookdetail(scope.row)"
                    class="detail-btn"
                  ><i class="el-icon-search"></i
                  >查看
                  </el-button
                  >
     <!--             <el-button
                    class="detail-btn"
                    @click="
                                            exportplanlist(scope.row);
                                            return false;
                                        "
                  ><i class="el-icon-upload2"></i
                  >上传
                  </el-button
                  >-->
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog
          title="提示"
          :visible.sync="testFlag"
          width="20%"
          :append-to-body="true"
          onselectstart="return false"
        >
          <div class="exampleMain">
            <div class="exampleCon">
              <p style="padding:0;line-height:30px;">
                试用阶段不可导出应急预案，若想导出，请注册正式账号，相关事项请联系博晟客服
                4000270009 转 5
              </p>
            </div>

            <div class="expoBtn">
              <a class="submit" @click="testFlag = false"
              >确 定</a
              >
            </div>
          </div>
        </el-dialog>
        <el-dialog
          title="应急物资清单"
          :visible.sync="dialogVisible"
          width="900"
        >
          <el-table
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width:100%;"
          >
            <el-table-column
              type="index"
              align="center"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="planName"
              show-overflow-tooltip
              label="物质名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="类别"
              show-overflow-tooltip
              align="center"
              prop="planCategory"
            ></el-table-column>
          </el-table>

          <div>
            <el-pagination
              @current-change="getLookdetail"
              :current-page.sync="pageIndex"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total1"
            ></el-pagination>
          </div>
        </el-dialog>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
  import Header from '../common/header'
  import Footer from '../common/footer'

  export default {
    components: {
      Header,
      Footer
    },
    data() {
      return {
        testFlag: false,
        dialogVisible: false,
        active: 0,
        uploadType: [
          '上传内部应急组织机构', '上传外部应急救援队伍', '上传应急物资装备', '上传应急救援协议'
        ],
        modeType: [
          '内部应急组织机构',
          '外部应急救援队伍',
          '应急物资装备'
        ],
        activeIndex2: -1,
        activeIndex: -1,
        formInline: {
          user: '',
          region: '',
        },

        data1: [{
          c: '1.5M',
          d: '企业管理员',
          flag: false,

          date: '2016-05-02',
          name: '自然灾害',
          address: '现场处置方案'
        }],
        multipleSelection: [],
        currentPage: 1,
        planList: [],
        uploadOver: false,
        planList1:[],
        navChildren:[],
        loadings:false,
        pageIndex:1,
        pageSize:10,
        list:[],
        total1:0
      };
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log('submit!');
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      uploadPlan(fileObj) {
        //导入应急预案

        let url =
          this.$baseUrl +
          "/emergency/v1.0/import/plan/items";
        var fd = new FormData();
        fd.append("file", fileObj.file);
        fd.append(
          "userName",
          JSON.parse(localStorage.getItem("user")).userAccount
        );
        fd.append('companyId', JSON.parse(localStorage.getItem("user")).companyId)
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        this.loading = true;
        this.$axios.post(url, fd, config).then(res => {
          this.loading = false;
          if (res.data.meta.success) {
            this.$message({
              message: "上传成功",
              type: "success"
            });
            this.getplanlist1();
          } else {
            this.$message.error("上传失败");
          }
        });
      },
      browserIsIe() {
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
          return true;
        }
        else {
          return false;
        }
      },
      lookmsg(item) {
        let url = item.viewUrl;
        var tempwindow = window.open('_blank');//打开一个窗口，然后用

        tempwindow.location = url;//使这个窗口跳转到百度，这样就会呈现弹出百度窗口的效果了。
      },
      addpicture(item) {
        if (this.uploadOver) {
          this.$message({
            message: '正在添加封面中，请稍等...',
            type: 'success'
          });
          return false
        }
        this.uploadOver = true
        let params = {
          "companyId": JSON.parse(localStorage.getItem('user')).companyId,
        }
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "emergency/v1.0/plan/cover",
          data: params
        }).then(
          (res) => {
            if (res.data.meta.success) {
              this.$message({
                message: "添加封面成功",
                type: 'success'
              });
            } else {
              this.$message({
                message: res.data.meta.message,
                type: 'error'
              });
            }
            this.uploadOver = false
          })

      },
      goToPage(index) {
        console.log(this.navChildren)
        this.$router.push({
          path: this.navChildren[index].menuUrl,
          query: {
            navIndex: this.$route.query.navIndex,
            navChildren: this.$route.query.navChildren
          }
        })
      },
      getplanlist1() {
        let params = {
          "companyId":JSON.parse(localStorage.getItem('user')).companyId,
          "pageIndex": 1,
          "pageSize": 10,
          "uploadType": "6"
        }
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "emergency/v2.0/equipment/queryuploadfilerecords",
          data: params
        }).then(
          (res) => {

            if(res.data.meta.success){
              this.planList1 = res.data.data.records;
            }
            this.loadings = false;
          })
      },
      lookdetail (row) {
        //查看上传的数据
        this.riskTit = row.originalFileName.split('.')[0]
        var type = row.originalFileName.split('.')[1]
        if (type == 'doc' || type == 'docx') {
          this.fileType = 1
          this.pageSize1 = 10000
        } else {
          this.fileType = 2
        }
        // console.log(this.fileType)
        this.dialogVisible = true
        this.uploadRecordId = row.id
        this.getLookdetail()
      },
      getLookdetail () {
        //获取上传详情内容
        let params = {
          companyId: '747822532547051520',//JSON.parse(localStorage.getItem('user')).companyId,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
        this.$axios({
          method: "post",
          url: this.$baseUrl + "/emergency/v1.0/plan/item/info?companyId="+JSON.parse(localStorage.getItem('user')).companyId+"&pageIndex="+this.pageIndex+"&pageSize="+ this.pageSize,
          data: params
        }).then(res => {
          if (res.data.data) {
            this.list = res.data.data.records;
            this.total1 = res.data.data.total * 1
          } else {
            this.riskVisibleList = [];
          }
        });
      },
    },
    created() {
      this.getplanlist1();//清单
      this.loadings = true;
      this.navChildren = JSON.parse(this.$route.query.navChildren)
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import "../../../static/css/information.less";

  .planmanage2 {
    padding-bottom: 200px;
    .form-container {
      padding: 0 0 10px;
      margin: 0 auto;
      p {
        font-size: 16px;
        font-weight: 800;
        color: #666666;
        text-align: center;
        margin: 48px 0 24px 0;
      }
      .manageBtn_div {
        overflow: hidden;
        width: 100%;
        height: 40px;
        padding: 0 100px;
        margin-bottom: 25px;
        .el-button {
          background: #f8f7ff;
          border: 0;
          border-radius: 6px;
          margin-right: 4px;
          float: right;
          font-size: 14px;
          color: #6492ff;
        }
        .el-button:hover {
          opacity: 0.8;
        }
      }
      .el-table {
        width: calc(100% - 200px);
        margin: 0 auto;
        border-top: 1px solid #ebeef5;
        td {
          padding: 0;
          height: 48px;
          line-height: 48px;
        }
        .div-edit {
          .el-button {
            color: #3f80ff;
            background: #f6f9ff;
            border: 0;
            margin: 5px 0 0 10px;
          }
        }
      }
      .page-container {
        width: 620px;
        margin: 50px auto;
        padding: 0;
      }
    }
    dl {
      margin-left: 100px;
      font-size: 14px;
      .dl-btn {
        display: inline-block;
        padding: 0 10px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border-radius: 6px;
        text-align: center;
        margin-bottom: 14px;
      }
      dt.dl-btn {
        background: #f6f9ff;
        color: #3f80ff;
      }
      dd {
        margin-bottom: 10px;
        color: #808080;
        line-height: 36px;
        a {
          color: #30dd05;
          text-decoration: underline;
        }
        span.dl-btn {
          background: #f6f9ff;
          color: #3f80ff;
          padding: 0 20px;
          margin: 0 10px;
        }
      }
    }
    .el-upload-list.el-upload-list--text {
      display: none;
    }
  }

  .newleft {
    float: left;
  }

  .newright {
    float: left;
  }

  .newmsg1 {
    width: 85px;
    height: 40px;
    float: left;
    border-radius: 8px;
    border: 1px solid #4180ff;
    margin-top: 5px;
    margin-left: 10px;
    padding-top: 2px;
    padding-left: 2px;
  }

  .expoBtn {
    text-align: right;
    margin-top: 20px;
    .submit {
      display: inline-block;
      border-radius: 8px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      height: 36px;
      width: 85px;
      color: #fff;
      border: none;
      cursor: pointer;
      background: #4080ff;
      /*background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);*/
    }
    .submit:hover {
      opacity: 0.8;
    }
  }
</style>
